/**
 * 表单元素绑定
 *
 *    现象：
 *      1. 当给输入框绑定 value 属性时，发现输入框无法输入了。感觉这个输入框已经完全受控与state数据，叫做受控组件
 *
 *    受控组件：
 *      完全由数据控制，需要数据变更引起组件重新render才能修改。
 *    非受控组件：
 *      不受数据控制。
 *
 *    PS: 除了文件选择框之外其他表单元素都可以使用受控组件的玩法
 *
 *    什么时候使用受控什么时候使用非受控：
 *      当需要实时获取最新的输入数据时，使用受控，反之使用非受控
 *
 *    当我们使用非受控玩法时，又希望元素能有默认值：
 *      value     => defaultValue
 *      checked   => defaultChecked
 */

import { ChangeEvent, Component } from "react";
import "./global.scss";

export default class App extends Component {
  state = {
    username: "admin",
    remarks: "一个帅小伙",
    gender: 0, // 0 - 男 1 - 女
    fruits: ["Apple"],
    flag: true,
    city: "001",
  };

  changeUsername = (event: ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value);
    this.setState({
      username: event.target.value,
    });
  };

  changeRemarks = (event: ChangeEvent<HTMLTextAreaElement>) => {
    this.setState({
      remarks: event.target.value,
    });
  };

  changeGender = (value: number) => {
    this.setState({
      gender: value,
    });
  };

  changeFruits = (str: string) => {
    // 当前 str 是否在 this.state.fruits 中
    //    在，则移除
    //    不在，则添加
    console.log("str", str);
    if (this.state.fruits.includes(str)) {
      // 在
      this.setState({
        fruits: this.state.fruits.filter((item) => item !== str),
      });
    } else {
      // 不在
      // this.state.fruits.push(str); // 不行
      this.setState({
        fruits: [...this.state.fruits, str],
      });
    }
  };

  changeFlag = (event: ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.checked);
    this.setState({
      flag: event.target.checked,
    });
  };

  changeCity = (event: ChangeEvent<HTMLSelectElement>) => {
    console.log(event.target.value);
    this.setState({
      city: event.target.value,
    });
  };

  handleSubmit = () => {
    console.log(this.state.username);
    console.log(this.state.remarks);
    console.log(this.state.gender);
    console.log(this.state.fruits);
    console.log(this.state.flag);
    console.log(this.state.city);
  };

  render() {
    console.log("App Render");
    return (
      <div>
        <h1>表单元素</h1>
        <hr />
        <label className="item">
          <span className="item_label">用户名：</span>
          <div className="item_content">
            <input value={this.state.username} onChange={this.changeUsername} />
          </div>
        </label>

        <label className="item">
          <span className="item_label">备注：</span>
          <div className="item_content">
            <textarea
              value={this.state.remarks}
              onChange={this.changeRemarks}
            />
          </div>
        </label>

        <label className="item">
          <span className="item_label">性别：</span>
          <div className="item_content">
            <input
              type="radio"
              checked={this.state.gender === 0}
              onChange={() => this.changeGender(0)}
            />
            男
            <input
              type="radio"
              checked={this.state.gender === 1}
              onChange={() => this.changeGender(1)}
            />
            女
          </div>
        </label>

        <label className="item">
          <span className="item_label">爱好：</span>
          <div className="item_content">
            <label>
              <input
                type="checkbox"
                checked={this.state.fruits.includes("Apple")}
                onChange={() => this.changeFruits("Apple")}
              />
              Apple
            </label>
            <label>
              <input
                type="checkbox"
                checked={this.state.fruits.includes("Banana")}
                onChange={() => this.changeFruits("Banana")}
              />
              Banana
            </label>
            <label>
              <input
                type="checkbox"
                checked={this.state.fruits.includes("Orange")}
                onChange={() => this.changeFruits("Orange")}
              />
              Orange
            </label>
          </div>
        </label>

        <label className="item">
          <span className="item_label">协议：</span>
          <div className="item_content">
            <label>
              <input
                type="checkbox"
                checked={this.state.flag}
                onChange={this.changeFlag}
              />
              <span>是否同意</span>
            </label>
          </div>
        </label>

        <label className="item">
          <span className="item_label">城市：</span>
          <div className="item_content">
            <select value={this.state.city} onChange={this.changeCity}>
              <option value="">请选择</option>
              <option value="001">北京</option>
              <option value="002">上海</option>
              <option value="003">广州</option>
              <option value="004">深圳</option>
            </select>
          </div>
        </label>

        <button onClick={this.handleSubmit}>注册</button>
      </div>
    );
  }
}
